前言
在這篇文章中，我們將介紹如何使用 Firebase Hosting 來部署一個靜態網站，並結合 Cloud Functions 實現動態後端邏輯。這種無伺服器架構讓我們能夠省去傳統伺服器的維護和管理工作，直接將應用程序部署到 Firebase 的雲端，並通過 Cloud Functions 建立後端 API 端點來處理各種邏輯需求。

1. Firebase Hosting 部署
Firebase Hosting 是一個專門用來部署靜態網站的工具，支持 HTML、CSS、JavaScript 等前端資源的托管。使用它，你可以輕鬆地將靜態網站上傳並部署到 Firebase 的全球 CDN 上，讓網站擁有極佳的載入速度和穩定性。

1.1 初始化專案
首先，我們需要在本地環境中初始化 Firebase 專案。這個過程非常簡單，只需要安裝 Firebase CLI，然後通過幾個指令即可完成。

npm install -g firebase-tools  //安裝 Firebase CLI
firebase login  //登錄 Firebase 帳號
firebase init hosting   //初始化 Firebase 專案

在這個過程中，Firebase 會詢問一些基本的設置問題，例如是否要部署到現有的 Firebase 專案，或者是否要使用單頁應用模式。選擇後，它會自動生成一個 firebase.json 文件來配置你的專案。

1.2 部署網站
完成初始化後，我們可以將靜態網站文件放入 Firebase 專案的 public 資料夾中。確保所有前端資源都已準備好後，使用以下指令進行部署：
firebase deploy --only hosting
這樣，靜態網站就會被部署到 Firebase Hosting 並在全球 CDN 節點上進行分發，使用者可以快速存取網站，無需擔心伺服器的維護或擴展。

2. 使用 Cloud Functions 建立動態 API
除了靜態網站，我們通常還需要處理後端邏輯，比如處理用戶請求、存取資料庫等。在這個情境下，Firebase Cloud Functions 是一個理想的選擇。它允許我們撰寫並部署無伺服器的 API 端點來處理後端邏輯，並在用戶請求時自動觸發執行。

2.1 初始化 Cloud Functions
在初始化 Firebase Hosting 之後，我們可以使用相同的 CLI 來啟用 Cloud Functions。
firebase init functions
這個過程會為我們生成一個 functions 資料夾，其中包含 Node.js 的代碼模板。我們可以在其中撰寫處理 API 請求的邏輯。

2.2 建立簡單的 API 端點
我們將通過簡單的例子來建立一個動態 API 端點。這個 API 將會返回一個歡迎消息，並且可以在前端應用中進行調用。

const functions = require('firebase-functions');
const express = require('express');
const app = express();

// 建立簡單的 API 端點，返回歡迎消息
app.get('/api/welcome', (req, res) => {
  res.send('Welcome to Firebase Cloud Functions!');
});

// 將 Express 應用綁定到 Cloud Functions
exports.api = functions.https.onRequest(app);

完成代碼編寫後，只需要使用 firebase deploy --only functions 指令即可將 API 端點部署到 Firebase。這樣，當用戶訪問 /api/welcome 時，Cloud Functions 就會被自動觸發，並返回相應的結果。

2.3 與前端整合
在 Firebase Hosting 部署的前端頁面中，我們可以通過 JavaScript 發送 HTTP 請求來調用這個 API，實現前後端的數據交互。

fetch('/api/welcome')
  .then(response => response.text())
  .then(data => {
    console.log(data); // 'Welcome to Firebase Cloud Functions!'
  });

3. 整合 Firebase Authentication 實現身份驗證
在很多應用場景中，身份驗證是保護應用數據和管理用戶訪問權限的關鍵。Firebase Authentication 支援多種身份驗證方式，如電子郵件、Google、Facebook 等。我們可以很輕鬆地將其與 Cloud Functions 和 Firebase Hosting 結合，實現安全的用戶身份驗證和權限控制。

3.1 設置 Firebase Authentication
在 Firebase 控制台中，我們可以啟用 Firebase Authentication 並選擇適合的身份驗證方式。接下來，我們可以在前端應用中整合身份驗證流程，並在 Cloud Functions 中根據用戶身份進行權限控制。

3.2 在 Cloud Functions 中檢查身份驗證狀態
當用戶發送請求到 Cloud Functions 時，我們可以通過 request.auth 來檢查用戶是否已通過身份驗證，並根據身份來授予不同的權限。

app.get('/api/secure', (req, res) => {
  const user = req.auth;

  if (user) {
    res.send(`Hello, ${user.email}`);
  } else {
    res.status(403).send('Unauthorized');
  }
});

在這個例子中，我們保護了 /api/secure 路徑，只有經過身份驗證的用戶才能訪問該路徑。這種方式非常適合處理需要保護的數據或後端邏輯。

結語
通過 Firebase Hosting 和 Cloud Functions 的結合，我們可以打造一個完整的 Serverless Web 應用，無需維護伺服器，並且能夠專注於應用的核心功能開發。如果你有任何問題，歡迎在留言區分享！